<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下载管理界面 - 原型图</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin: 0;
            padding: 40px;
            min-height: 100vh;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 40px;
            font-size: 2.5em;
            font-weight: 300;
        }

        .management-container {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 30px;
            background: #f8f9fa;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 40px;
        }

        .sidebar {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .sidebar-title {
            font-size: 1.2em;
            color: #333;
            margin-bottom: 20px;
            font-weight: 600;
            padding-bottom: 10px;
            border-bottom: 2px solid #e9ecef;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 25px;
        }

        .stat-card {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
        }

        .stat-number {
            font-size: 1.5em;
            font-weight: bold;
            color: #2196F3;
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 0.8em;
            color: #666;
        }

        .filter-section {
            margin-bottom: 25px;
        }

        .filter-title {
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
        }

        .filter-options {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .filter-option {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            padding: 5px;
            border-radius: 4px;
            transition: background 0.3s ease;
        }

        .filter-option:hover {
            background: #f0f8ff;
        }

        .filter-option.active {
            background: #e3f2fd;
            color: #1976d2;
        }

        .main-content {
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .content-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f0f0;
        }

        .content-title {
            font-size: 1.5em;
            color: #333;
            font-weight: 600;
        }

        .header-actions {
            display: flex;
            gap: 10px;
        }

        .button {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            font-size: 0.9em;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .button.primary {
            background: #2196F3;
            color: white;
        }

        .button.primary:hover {
            background: #1976D2;
        }

        .button.secondary {
            background: #f5f5f5;
            color: #333;
            border: 1px solid #ddd;
        }

        .button.secondary:hover {
            background: #e0e0e0;
        }

        .button.danger {
            background: #f44336;
            color: white;
        }

        .button.danger:hover {
            background: #d32f2f;
        }

        .download-list {
            max-height: 500px;
            overflow-y: auto;
        }

        .download-item {
            display: flex;
            align-items: center;
            padding: 15px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            margin-bottom: 10px;
            transition: all 0.3s ease;
        }

        .download-item:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .download-item.downloading {
            border-color: #2196F3;
            background: #f0f8ff;
        }

        .download-item.completed {
            border-color: #4CAF50;
            background: #f1f8e9;
        }

        .download-item.error {
            border-color: #f44336;
            background: #ffebee;
        }

        .download-icon {
            width: 40px;
            height: 40px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-right: 15px;
        }

        .download-icon.image {
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
        }

        .download-icon.video {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        }

        .download-info {
            flex: 1;
        }

        .download-name {
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }

        .download-details {
            font-size: 0.9em;
            color: #666;
            display: flex;
            gap: 15px;
        }

        .download-progress {
            width: 200px;
            margin: 0 15px;
        }

        .progress-bar {
            width: 100%;
            height: 6px;
            background: #e0e0e0;
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 5px;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #4CAF50, #45a049);
            transition: width 0.3s ease;
        }

        .progress-fill.downloading {
            background: linear-gradient(90deg, #2196F3, #1976D2);
        }

        .progress-fill.error {
            background: linear-gradient(90deg, #f44336, #d32f2f);
        }

        .progress-text {
            font-size: 0.8em;
            color: #666;
            text-align: center;
        }

        .download-actions {
            display: flex;
            gap: 8px;
        }

        .action-button {
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .action-button.play {
            background: #4CAF50;
            color: white;
        }

        .action-button.play:hover {
            background: #45a049;
        }

        .action-button.pause {
            background: #ff9800;
            color: white;
        }

        .action-button.pause:hover {
            background: #f57c00;
        }

        .action-button.stop {
            background: #f44336;
            color: white;
        }

        .action-button.stop:hover {
            background: #d32f2f;
        }

        .action-button.delete {
            background: #9e9e9e;
            color: white;
        }

        .action-button.delete:hover {
            background: #757575;
        }

        .queue-section {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-top: 30px;
        }

        .queue-title {
            font-size: 1.2em;
            color: #333;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .queue-stats {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
        }

        .queue-stat {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9em;
            color: #666;
        }

        .queue-stat-number {
            font-weight: bold;
            color: #2196F3;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .feature-card {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 25px;
            border: 2px solid #e9ecef;
        }

        .feature-title {
            font-size: 1.3em;
            color: #333;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .feature-list {
            list-style: none;
            padding: 0;
        }

        .feature-list li {
            padding: 8px 0;
            color: #555;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .feature-list li::before {
            content: "✓";
            color: #4CAF50;
            font-weight: bold;
        }

        .demo-tabs {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
        }

        .demo-tab {
            padding: 10px 20px;
            background: #f5f5f5;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .demo-tab.active {
            background: #2196F3;
            color: white;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>下载管理界面 - 原型图</h1>

        <div class="demo-tabs">
            <button class="demo-tab active" onclick="showTab('history')">下载历史</button>
            <button class="demo-tab" onclick="showTab('queue')">下载队列</button>
            <button class="demo-tab" onclick="showTab('stats')">统计信息</button>
        </div>

        <div class="tab-content active" id="history">
            <div class="management-container">
                <div class="sidebar">
                    <div class="sidebar-title">下载统计</div>
                    <div class="stats-grid">
                        <div class="stat-card">
                            <div class="stat-number">156</div>
                            <div class="stat-label">总下载</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number">2.3GB</div>
                            <div class="stat-label">总大小</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number">142</div>
                            <div class="stat-label">成功</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number">14</div>
                            <div class="stat-label">失败</div>
                        </div>
                    </div>

                    <div class="filter-section">
                        <div class="filter-title">状态筛选</div>
                        <div class="filter-options">
                            <div class="filter-option active">
                                <input type="checkbox" checked> 全部
                            </div>
                            <div class="filter-option">
                                <input type="checkbox"> 下载中
                            </div>
                            <div class="filter-option">
                                <input type="checkbox"> 已完成
                            </div>
                            <div class="filter-option">
                                <input type="checkbox"> 失败
                            </div>
                            <div class="filter-option">
                                <input type="checkbox"> 已暂停
                            </div>
                        </div>
                    </div>

                    <div class="filter-section">
                        <div class="filter-title">类型筛选</div>
                        <div class="filter-options">
                            <div class="filter-option active">
                                <input type="checkbox" checked> 全部
                            </div>
                            <div class="filter-option">
                                <input type="checkbox"> 图片
                            </div>
                            <div class="filter-option">
                                <input type="checkbox"> 视频
                            </div>
                        </div>
                    </div>
                </div>

                <div class="main-content">
                    <div class="content-header">
                        <div class="content-title">下载历史</div>
                        <div class="header-actions">
                            <button class="button secondary">🔄 刷新</button>
                            <button class="button danger">🗑️ 清空历史</button>
                        </div>
                    </div>

                    <div class="download-list">
                        <div class="download-item downloading">
                            <div class="download-icon video">🎥</div>
                            <div class="download-info">
                                <div class="download-name">product_demo.mp4</div>
                                <div class="download-details">
                                    <span>大小: 45.2MB</span>
                                    <span>来源: example.com</span>
                                    <span>开始时间: 14:30</span>
                                </div>
                            </div>
                            <div class="download-progress">
                                <div class="progress-bar">
                                    <div class="progress-fill downloading" style="width: 65%"></div>
                                </div>
                                <div class="progress-text">65% • 29.4MB/45.2MB</div>
                            </div>
                            <div class="download-actions">
                                <button class="action-button pause">⏸️</button>
                                <button class="action-button stop">⏹️</button>
                            </div>
                        </div>

                        <div class="download-item completed">
                            <div class="download-icon image">🖼️</div>
                            <div class="download-info">
                                <div class="download-name">banner.jpg</div>
                                <div class="download-details">
                                    <span>大小: 2.3MB</span>
                                    <span>来源: example.com</span>
                                    <span>完成时间: 14:25</span>
                                </div>
                            </div>
                            <div class="download-progress">
                                <div class="progress-bar">
                                    <div class="progress-fill" style="width: 100%"></div>
                                </div>
                                <div class="progress-text">100% • 完成</div>
                            </div>
                            <div class="download-actions">
                                <button class="action-button delete">🗑️</button>
                            </div>
                        </div>

                        <div class="download-item error">
                            <div class="download-icon video">🎥</div>
                            <div class="download-info">
                                <div class="download-name">tutorial.mp4</div>
                                <div class="download-details">
                                    <span>大小: 128MB</span>
                                    <span>来源: example.com</span>
                                    <span>错误: 网络超时</span>
                                </div>
                            </div>
                            <div class="download-progress">
                                <div class="progress-bar">
                                    <div class="progress-fill error" style="width: 23%"></div>
                                </div>
                                <div class="progress-text">23% • 失败</div>
                            </div>
                            <div class="download-actions">
                                <button class="action-button play">▶️</button>
                                <button class="action-button delete">🗑️</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-content" id="queue">
            <div class="management-container">
                <div class="sidebar">
                    <div class="sidebar-title">队列控制</div>
                    <div class="stats-grid">
                        <div class="stat-card">
                            <div class="stat-number">3</div>
                            <div class="stat-label">进行中</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number">8</div>
                            <div class="stat-label">等待中</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number">2</div>
                            <div class="stat-label">已暂停</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number">5</div>
                            <div class="stat-label">已完成</div>
                        </div>
                    </div>

                    <div class="filter-section">
                        <div class="filter-title">队列操作</div>
                        <div class="filter-options">
                            <div class="filter-option">
                                ▶️ 开始全部
                            </div>
                            <div class="filter-option">
                                ⏸️ 暂停全部
                            </div>
                            <div class="filter-option">
                                ⏹️ 停止全部
                            </div>
                            <div class="filter-option">
                                🗑️ 清空队列
                            </div>
                        </div>
                    </div>
                </div>

                <div class="main-content">
                    <div class="content-header">
                        <div class="content-title">下载队列</div>
                        <div class="header-actions">
                            <button class="button primary">▶️ 开始全部</button>
                            <button class="button secondary">⏸️ 暂停全部</button>
                        </div>
                    </div>

                    <div class="queue-section">
                        <div class="queue-title">队列状态</div>
                        <div class="queue-stats">
                            <div class="queue-stat">
                                <span>并发下载:</span>
                                <span class="queue-stat-number">3/5</span>
                            </div>
                            <div class="queue-stat">
                                <span>总速度:</span>
                                <span class="queue-stat-number">2.1MB/s</span>
                            </div>
                            <div class="queue-stat">
                                <span>预计剩余:</span>
                                <span class="queue-stat-number">15分钟</span>
                            </div>
                        </div>
                    </div>

                    <div class="download-list">
                        <div class="download-item downloading">
                            <div class="download-icon image">🖼️</div>
                            <div class="download-info">
                                <div class="download-name">gallery_01.jpg</div>
                                <div class="download-details">
                                    <span>大小: 1.8MB</span>
                                    <span>速度: 850KB/s</span>
                                    <span>优先级: 高</span>
                                </div>
                            </div>
                            <div class="download-progress">
                                <div class="progress-bar">
                                    <div class="progress-fill downloading" style="width: 45%"></div>
                                </div>
                                <div class="progress-text">45% • 810KB/1.8MB</div>
                            </div>
                            <div class="download-actions">
                                <button class="action-button pause">⏸️</button>
                                <button class="action-button stop">⏹️</button>
                            </div>
                        </div>

                        <div class="download-item">
                            <div class="download-icon video">🎥</div>
                            <div class="download-info">
                                <div class="download-name">presentation.mp4</div>
                                <div class="download-details">
                                    <span>大小: 89.5MB</span>
                                    <span>状态: 等待中</span>
                                    <span>优先级: 中</span>
                                </div>
                            </div>
                            <div class="download-progress">
                                <div class="progress-bar">
                                    <div class="progress-fill" style="width: 0%"></div>
                                </div>
                                <div class="progress-text">等待中...</div>
                            </div>
                            <div class="download-actions">
                                <button class="action-button play">▶️</button>
                                <button class="action-button delete">🗑️</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-content" id="stats">
            <div class="management-container">
                <div class="sidebar">
                    <div class="sidebar-title">统计概览</div>
                    <div class="stats-grid">
                        <div class="stat-card">
                            <div class="stat-number">1.2GB</div>
                            <div class="stat-label">本月下载</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number">89</div>
                            <div class="stat-label">本月文件</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number">2.1MB/s</div>
                            <div class="stat-label">平均速度</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number">95%</div>
                            <div class="stat-label">成功率</div>
                        </div>
                    </div>
                </div>

                <div class="main-content">
                    <div class="content-header">
                        <div class="content-title">详细统计</div>
                        <div class="header-actions">
                            <button class="button secondary">📊 导出报告</button>
                        </div>
                    </div>

                    <div class="stats-grid" style="grid-template-columns: repeat(3, 1fr); margin-top: 20px;">
                        <div class="stat-card">
                            <div class="stat-number">图片</div>
                            <div class="stat-label">67个文件 • 156MB</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number">视频</div>
                            <div class="stat-label">22个文件 • 2.1GB</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number">其他</div>
                            <div class="stat-label">12个文件 • 45MB</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-title">下载管理功能</div>
                <ul class="feature-list">
                    <li>下载历史记录和查看</li>
                    <li>实时下载进度监控</li>
                    <li>下载队列管理</li>
                    <li>暂停/恢复/停止下载</li>
                    <li>批量操作功能</li>
                    <li>下载统计和分析</li>
                </ul>
            </div>

            <div class="feature-card">
                <div class="feature-title">用户体验</div>
                <ul class="feature-list">
                    <li>直观的进度条显示</li>
                    <li>状态颜色编码</li>
                    <li>文件信息详细展示</li>
                    <li>快速操作按钮</li>
                    <li>筛选和搜索功能</li>
                    <li>响应式界面设计</li>
                </ul>
            </div>

            <div class="feature-card">
                <div class="feature-title">技术特性</div>
                <ul class="feature-list">
                    <li>Chrome Downloads API 集成</li>
                    <li>本地存储数据管理</li>
                    <li>实时状态更新</li>
                    <li>错误处理和重试</li>
                    <li>性能优化</li>
                    <li>数据导出功能</li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        function showTab(tabName) {
            // 隐藏所有标签内容
            const tabContents = document.querySelectorAll('.tab-content');
            tabContents.forEach(content => content.classList.remove('active'));

            // 移除所有标签的激活状态
            const tabs = document.querySelectorAll('.demo-tab');
            tabs.forEach(tab => tab.classList.remove('active'));

            // 显示选中的标签内容
            document.getElementById(tabName).classList.add('active');

            // 激活对应的标签按钮
            event.target.classList.add('active');
        }

        // 筛选选项点击功能
        document.querySelectorAll('.filter-option').forEach(option => {
            option.addEventListener('click', function () {
                this.classList.toggle('active');
            });
        });

        // 操作按钮点击功能
        document.querySelectorAll('.action-button').forEach(button => {
            button.addEventListener('click', function () {
                // 这里可以添加具体的操作逻辑
                console.log('点击了操作按钮:', this.textContent);
            });
        });
    </script>
</body>

</html>